Light mode for input controls and panels, batch A (2/3) by jackgranatowski · Pull Request #507 · codeslash-dev/SLASHED

jackgranatowski · 2026-07-03T09:44:19Z

Second of a 3-part light-mode rollout. Stack: #506 (1/3) → 2/3 (this PR) → #TBD (3/3). Based on claude/studio-light-mode-1-infra — merge #506 first; this PR's base will retarget to main automatically once that happens, and the diff below will shrink to just this PR's own files.

Summary

Applies the theme.svelte.ts system (added in #506) to every shared input control and the first batch of domain panels.

Inputs: ClampField, ColorInput, OklchColorDesk, PowerKnobRow, RangeWithNumber, SliderRow, TokenRow
Panels: AllTokensTab, BordersPanel, CheatsheetPanel, ColorsPanel, EffectsPanel, ExportPanel, GenericTokenPanel, HomePanel

Review-bot fixes folded in

AllTokensTab and GenericTokenPanel: search input placeholders were missing a dark:placeholder:* pairing, staying light-theme-tuned against the dark chrome.
CheatsheetPanel: the KIND_COLOR badge map was missing dark: variants for the motion and form entries (every other entry had one).

Testing

npx svelte-check — 0 errors
npx vitest run — 113/113 passing

Generated by Claude Code

Second of a 3-part light-mode rollout, stacked on the shell/infra PR. Applies the theme.svelte.ts system (added in part 1) to every shared input control and the first batch of domain panels. Inputs: ClampField, ColorInput, OklchColorDesk, PowerKnobRow, RangeWithNumber, SliderRow, TokenRow. Panels: AllTokensTab, BordersPanel, CheatsheetPanel, ColorsPanel, EffectsPanel, ExportPanel, GenericTokenPanel, HomePanel. Includes fixes for two review-bot findings on the original combined PR: missing dark: placeholder pairing on the AllTokensTab and GenericTokenPanel search inputs, and missing dark: variants for the motion/form entries in CheatsheetPanel's KIND_COLOR map.

coderabbitai · 2026-07-03T09:44:27Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e86cd187-9b62-4038-9f17-df54d8dfff87

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/studio-light-mode-2-inputs-panels-a

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

qodo-code-review · 2026-07-03T09:45:40Z

PR Summary by Qodo

Apply light-mode theming to shared inputs and core panels (batch A)

✨ Enhancement 🐞 Bug fix 🕐 40+ Minutes

AI Description

• Add light-mode styles to shared input controls using dark: variants.
• Update core configurator panels for readable light chrome and consistent borders.
• Fix missing dark placeholder and badge color variants in token search/cheatsheet.

Diagram

graph TD
  U((User)) --> S["Studio UI"] --> T["Theme system"] --> C[("Tailwind/CSS")]
  S --> I["Input controls"] --> T
  S --> P["Domain panels"] --> T

  subgraph Legend
    direction LR
    _a((Actor)) ~~~ _ui["UI"] ~~~ _cmp["Component"] ~~~ _css[("Styles")]
  end

High-Level Assessment

The following are alternative approaches to this PR:

1. Extract shared utility class tokens (e.g., inputBase, panelDivider)

➕ Reduces repeated bg/border/text triplets across many components
➕ Makes future theme tweaks safer and more consistent
➖ Requires introducing/maintaining a shared style module or component wrapper
➖ May be harder to fine-tune per-component edge cases

2. Move to CSS variables for neutral surfaces/borders (less Tailwind duplication)

➕ Centralized control over light/dark neutrals (surface, border, muted text)
➕ Smaller diffs for future theme adjustments
➖ Needs careful variable naming/rollout and potential design-token alignment
➖ Harder to reason about than explicit Tailwind utilities in markup

3. Create wrapper components for common patterns (search input, reset button, dividers)

➕ Avoids repeating placeholder + dark:placeholder pairings
➕ Standardizes interactive affordances (hover, focus, disabled)
➖ Adds component indirection for simple markup
➖ May complicate layout-specific styling in panels

Recommendation: Current approach (explicit light + dark Tailwind pairings) is appropriate for an incremental rollout and easy visual verification. Consider a follow-up consolidation pass (shared utility tokens or wrappers) once all batches land, to reduce duplication and prevent drift (e.g., placeholder and reset-hover variants).

Files changed (15) +269 / -269

Enhancement (14) +238 / -238

ClampField.svelteAdd light-mode neutrals to clamp slider + numeric inputs +13/-13

Add light-mode neutrals to clamp slider + numeric inputs
• Updates container, track, numeric inputs, and preview text to use light-friendly bg/border/text with dark: overrides. Also adjusts reset hover color for light mode.
configurator/src/components/inputs/ClampField.svelte

ColorInput.svelteLight-mode styling for swatch border, editable input, and reset +5/-5

Light-mode styling for swatch border, editable input, and reset
• Switches borders/backgrounds/text to support light mode while preserving dark defaults via dark: classes. Tweaks overridden value and reset hover colors to remain legible.
configurator/src/components/inputs/ColorInput.svelte

OklchColorDesk.svelteLight-mode pass for OKLCH picker header and expanded editor +13/-13

Light-mode pass for OKLCH picker header and expanded editor
• Adds light-mode backgrounds, borders, and text colors across the collapsed row and expanded sliders. Updates reset button color to keep contrast in light mode.
configurator/src/components/inputs/OklchColorDesk.svelte

PowerKnobRow.svelteLight-mode text and reset hover tuning for power knob rows +4/-4

Light-mode text and reset hover tuning for power knob rows
• Adjusts label/help/driving token text colors for light mode and adds dark: counterparts. Updates reset hover color to use a darker rose in light theme.
configurator/src/components/inputs/PowerKnobRow.svelte

RangeWithNumber.svelteLight-mode track/thumb borders and numeric input styling +3/-3

Light-mode track/thumb borders and numeric input styling
• Updates range track background and thumb border to use black-based neutrals in light mode with dark: overrides. Numeric input gets light-mode text and border colors.
configurator/src/components/inputs/RangeWithNumber.svelte

SliderRow.svelteLight-mode styling for labels, raw editor, and action buttons +7/-7

Light-mode styling for labels, raw editor, and action buttons
• Adds light-mode text colors and hover states for label, code-toggle, and reset controls. Updates raw input and default/help text to remain readable in light mode.
configurator/src/components/inputs/SliderRow.svelte

TokenRow.svelteLight-mode token row hover, swatch borders, and value editor +8/-8

Light-mode token row hover, swatch borders, and value editor
• Adjusts hover backgrounds, swatch borders, token metadata text, and editable value input for light mode with dark: pairings. Ensures overridden value coloring works in both themes.
configurator/src/components/inputs/TokenRow.svelte

AllTokensTab.svelteLight-mode token search + filters (and placeholder dark pairing fix) +11/-11

Light-mode token search + filters (and placeholder dark pairing fix)
• Updates search input, filter toggles, counters, dividers, and empty-state text for light mode. Adds missing dark:placeholder pairing so placeholder is correct under dark chrome.
configurator/src/components/panels/AllTokensTab.svelte

BordersPanel.svelteLight-mode borders panel previews, dividers, and controls +25/-25

Light-mode borders panel previews, dividers, and controls
• Reworks borders/preview cards, separators, labels, and button states to support light mode via black-based neutrals plus dark: overrides. Keeps selected states and previews readable in both themes.
configurator/src/components/panels/BordersPanel.svelte

ColorsPanel.svelteLight-mode pass for color previews, palettes, and controls +83/-83

Light-mode pass for color previews, palettes, and controls
• Applies light-mode borders/backgrounds/text to semantic previews, palette ramps, LumLocker/status sections, curve previews, gradients, and related controls. Ensures interactive toggles and badges remain legible in both themes.
configurator/src/components/panels/ColorsPanel.svelte

EffectsPanel.svelteLight-mode styling for effects previews and form controls +26/-26

Light-mode styling for effects previews and form controls
• Updates blur/opacity/scrim/scrollbar/text-shadow sections to use light-friendly surfaces, borders, and label text with dark: overrides. Keeps preview widgets readable by adjusting inner text/border colors.
configurator/src/components/panels/EffectsPanel.svelte

ExportPanel.svelteLight-mode export panel buttons, toggles, and code block +14/-14

Light-mode export panel buttons, toggles, and code block
• Retunes descriptive text, primary buttons, toggle group styling, and icon colors for light mode. Switches CSS output preview to a light background in light mode with dark fallback.
configurator/src/components/panels/ExportPanel.svelte

GenericTokenPanel.svelteLight-mode search + counts (and placeholder dark pairing fix) +4/-4

Light-mode search + counts (and placeholder dark pairing fix)
• Updates modified-count badge and search input styling for light mode with dark: counterparts. Adds missing dark:placeholder pairing and adjusts empty/overflow messages for light readability.
configurator/src/components/panels/GenericTokenPanel.svelte

HomePanel.svelteLight-mode home dashboard cards, lists, and quick-save controls +22/-22

Light-mode home dashboard cards, lists, and quick-save controls
• Adjusts welcome banner accents, domain/tool list hovers, saved-theme cards, and quick-save input/button styling for light mode while preserving dark mode via dark: variants.
configurator/src/components/panels/HomePanel.svelte

Bug fix (1) +31 / -31

CheatsheetPanel.svelteLight-mode cheatsheet styling + KIND_COLOR dark variants completion +31/-31

Light-mode cheatsheet styling + KIND_COLOR dark variants completion
• Updates search input, tab switcher, list rows, and copy affordances for light mode with dark: pairing. Expands KIND_COLOR mapping to include both light and dark variants (including motion/form).
configurator/src/components/panels/CheatsheetPanel.svelte

qodo-code-review · 2026-07-03T09:46:19Z

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

This was referenced Jul 3, 2026

Light mode for remaining panels, batch B (3/3) #508

Merged

Add light mode support to configurator UI #500

Closed

jackgranatowski merged commit dad8f73 into claude/studio-light-mode-1-infra Jul 3, 2026
9 checks passed

jackgranatowski mentioned this pull request Jul 3, 2026

Land remaining light-mode panels (batch A + B) onto main #510

Merged

Navigation Menu

Uh oh!

Light mode for input controls and panels, batch A (2/3) - #507

Light mode for input controls and panels, batch A (2/3)#507
jackgranatowski merged 1 commit into
claude/studio-light-mode-1-infrafrom
claude/studio-light-mode-2-inputs-panels-a

jackgranatowski commented Jul 3, 2026

Uh oh!

coderabbitai Bot commented Jul 3, 2026

Review skipped

Uh oh!

qodo-code-review Bot commented Jul 3, 2026

Uh oh!

qodo-code-review Bot commented Jul 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jackgranatowski commented Jul 3, 2026

Summary

Review-bot fixes folded in

Testing

Uh oh!

coderabbitai Bot commented Jul 3, 2026

Review skipped

Uh oh!

qodo-code-review Bot commented Jul 3, 2026

PR Summary by Qodo

Uh oh!

qodo-code-review Bot commented Jul 3, 2026

Code Review by Qodo

Great, no issues found!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants